<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #myImg {
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
            width: 100%;
            max-width: 300px
        }

        #myImg:hover {
            opacity: 0.7;
        }

        /* The Modal (background)    背景部分     */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.8);
        }

        .modal-content {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
        }

        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }

        .modal-content,
        #caption {
            -webkit-animation: 1s zoom;
            animation: 1s zoom;
        }

        @-webkit-keyframes zoom {
            from {
                -webkit-transform: scale(0)
            }

            to {
                -webkit-transform: scale(1)
            }
        }

        @keyframes zoom {
            from {
                transform: scale(0)
            }

            to {
                transform: scale(1)
            }
        }

        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px) {
            .modal-content {
                width: 100%;
            }
        }
    </style>
</head>

<body>

    <h1>兼容 ie </h1>

    <h1> 在 safari 上存在 bug </h1>

    <h1>  解决 safari 的 bug , 并且自己封装成组件 调用   </h1>

    <h2>Image Modal --------- img:hover { opacity: 0.7 </h2>

    <img id="myImg" src="../img/bg2.jpeg" alt="this is tesla">

    <!-- The Modal -->
    <button id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </button>










    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">

        关键代码:
        背景部分不使用动画过渡, 直接瞬间全屏展示, 所以直接 display: none/block
        动画主要是图片部分使用
        #caption {
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.6s;
        animation-name: zoom;
        animation-duration: 0.6s;
        }

        @keyframes zoom {
        from {
        transform: scale(0)
        }
        to {
        transform: scale(1)
        }
        }

        判断点击的是不是 modal 对象:
        window.addEventListener('click', function (eee) {
        if(eee.target == modal){
        eee.target.style.display = 'none'
        }
        })


        iOS Safari 中 如果是 div, window.addEventListener('click' 绑定点击事件会失效:
        解决办法:
        将目标元素换成 <a> 或者 button 等可点击的元素
            推荐使用 button
            window.addEventListener('click', function (eee) {
            alert(eee.target)
            })


            记得加这个来兼容移动端网页:
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </xmp>

    <h1 style="height: 920px;">123123</h1>


</body>
<script>
    var modal = document.getElementById("myModal");
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");

    img.onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
    window.addEventListener('click', function (eee) {
        if (eee.target == modal) {
            eee.target.style.display = 'none'
        }
    })

    var span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
        modal.style.display = "none";
    }



</script>

</html>